<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/elementui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">


    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()">
        </el-date-picker>
    </div>


<el-table
        :data="tableData"
        style="width: 60%">
    <el-table-column
            prop="categoryId1"
            label="一级分类"
            width="180">
    </el-table-column>
    <el-table-column
            prop="countDate"
            label="日期"
            width="180">
    </el-table-column>
    <el-table-column
            prop="num"
            label="数量">
    </el-table-column>

    <el-table-column
            label="数量比例">
        <template slot-scope="scope">
            {{(scope.row.num/totalnum*100).toFixed(0)}}%
        </template>
    </el-table-column>

    <el-table-column
            prop="money"
            label="金额">
    </el-table-column>
    <el-table-column
            label="金额比例">
        <template slot-scope="scope">
            {{(scope.row.money/totalmoney*100).toFixed(2)}}%
        </template>
    </el-table-column>
    <el-table-column
            prop="name"
            label="分类名称">
    </el-table-column>
</el-table>
    <!--图表-->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
</body>
<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.common.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data(){
            return {
                tableData: [],
                dateRange:[],
                totalnum:0,
                totalmoney:0
            }
        },
        methods: {
            fetchData() {
                let date1 = this.dateRange[0].Format("yyyy-MM-dd");
                let date2 = this.dateRange[1].Format("yyyy-MM-dd");
                axios.post(`/categoryReport/categoryCount.do?date1=${date1}&date2=${date2}`).then(response => {
                    this.tableData = response.data;


                    this.totalnum=0;
                    this.totalmoney=0;
                    for(let i=0;i<this.tableData.length;i++){
                        this.totalnum+=this.tableData[i].num;
                        this.totalmoney+=this.tableData[i].money;
                    }


                    let legendData=[];
                    let numData=[];
                    let moneyData=[];
                    for(let i=0;i<this.tableData.length;i++){
                        legendData.push(this.tableData[i].categoryName);
                        numData.push({name:this.tableData[i].categoryName,value:this.tableData[i].num});
                        moneyData.push({name:this.tableData[i].categoryName,value:this.tableData[i].money});
                    }


                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    let option = {
                        title : {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:legendData
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:numData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }//,
                            // {
                            //     name: '访问来源',
                            //     type: 'pie',
                            //     radius : '55%',
                            //     center: ['50%', '60%'],
                            //     data:moneyData,
                            //     itemStyle: {
                            //         emphasis: {
                            //             shadowBlur: 10,
                            //             shadowOffsetX: 0,
                            //             shadowColor: 'rgba(0, 0, 0, 0.5)'
                            //         }
                            //     }
                            // }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);

                });
            }
        }


    });






</script>
</html>